/**
 * 审核/处置列表组件
 */
<template>
	<view class="fa-asset-list">
		<view class="fa-al-box pt-m2 pb-1 mb-1 bg-ff" v-for="(item, idx) in list" :key="idx" @click="$emit('methods', item)">
			<view class="flex-between pb-min font24 px-m2 col-gray" style="align-items: center;border-bottom: 1px solid #ECECF0;">
				<text>{{ item.CreateTime | dateFormat }}</text>
				<view><text class="pr-m2" style="color: #333;">{{ item.HandleTypeText }}</text><span class="fa-al-status font24" :class="statusColor(item.ApproveState)">{{ item.ApproveStateText }}</span></view>
			</view>
			<!-- 单个资产 -->
			<template v-if="item.Assets.length == 1">
				<u-cell-item v-for="info in item.Assets" :key="info.AssetGuid" :border-bottom="false" hover-class="none" :arrow="false" class="px-m2 pt-1">
					<u-image slot="icon" border-radius="12" :width="size" :height="size" :src="info.ImgUrls.length > 0 ? info.ImgUrls[0] : '/static/images/icon_assets.svg'"></u-image>
					<u-row gutter="0" slot="title" class="fa-al-title pl-1 font24">
						<u-col span="9">
							<h1 class="font28 u-line-1 col-main">{{ info.AssetName }}</h1>
							<view class="col-mark">
								<view>{{ info.OrgName }}</view><text>{{ info.AssetTypeText }}</text>
							</view>
						</u-col>
						<u-col span="3" class="text-right col-mark"><text>共{{ item.Assets.length }}件</text></u-col>
					</u-row>
				</u-cell-item>
			</template>
			<!-- 多个资产 -->
			<template v-else>
				<view class="px-m2 pt-1 cb flex-center">
					<view class="over-x m-col m-col20">
						<view class="cb" :style="{'width': (item.Assets.length * 128 + item.Assets.length * 20) + 'rpx'}">
							<u-image
								class="float-left mr-m2"
								v-for="(info, index) in item.Assets" :key="index"
								border-radius="12" 
								:width="size" :height="size"
								:src="info.ImgUrls.length > 0 ? info.ImgUrls[0] : '/static/images/icon_assets.svg'"
							></u-image>
						</view>
					</view>
					<view class="text-right col-mark font24 m-col m-col4">
						<text>共{{ item.Assets.length }}件</text>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
			    type: Array,
				default: []
			},
			size: {
				type: String,
				default: '128rpx'
			}
		},
		data() {
			return {
				
			}
		},
		created() {
			
		},
		methods: {
			// 状态颜色
			statusColor(info) {
				let curClass = '';
				if (info == 'ASSET_APPROVE_0001') {
					curClass = 'normal'
				} else if (info == 'ASSET_APPROVE_0002') {
					curClass = 'wait'
				} else {
					curClass = 'error'
				}
				return curClass
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fa-asset-list {
		.fa-al-box {
			border-radius: 8rpx;
			box-shadow: 0px 8rpx 24rpx rgba($color: #3D4C62, $alpha: .12);
		}
		.u-cell {
			padding: 0;
			padding-top: 20rpx;
			line-height: 44rpx;
		}
		.fa-al-status {
			padding: 4rpx 16rpx;
		}
		.normal {
			background-color: rgba($color: #54E0A4, $alpha: .1);
			color: #2DC35E;
		}
		.wait {
			background-color: rgba($color: #2E73E5, $alpha: .1);
			color: #2E73E5;
		}
		.error {
			background-color: rgba($color: #E55D5D, $alpha: .1);
			color: #E55D5D;
		}
	}
</style>
